<template>
    <view>
        <view class="flex flex-column flex-center grid-gap-4 min-vh-80" v-if="qrcode">
            <view class="flex flex-center grid-gap-2">
                <uni-icons type="checkbox-filled" size="40" color="var(--xl-success)"></uni-icons>
                <text class="h9 font-weight-600">创建成功</text>
            </view>
            <image :src="qrcode" style="width: 60vw;height: 60vw;" mode="scaleToFill" />
            <text class="h9 text-placeholder">长按图片保存到手机</text>
        </view>
        <view class="p-4 flex flex-column grid-gap-4" v-else>
            <view class="p-4 bg-white rounded-4 flex flex-column grid-gap-4">
                <view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg" @tap="showChannels = true;">
                    <text class="flex-1 h9 text-grey">选择渠道</text>
                    <x-picker v-model:show="showChannels" v-model="form.channels_id" :columns="[channels]"
                        keyName="title" valueName="id" confirm-color="var(--xl-primary)" @confirm="channelsConfirm">
                        <text class="h9 font-weight-600" v-if="form.channels_id"> {{ form.channels }} </text>
                        <text class="h9 font-weight-600 text-placeholder" v-else> 请选择渠道</text>
                    </x-picker>
                </view>
                <view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg" @tap="showPage = true;">
                    <text class="flex-1 h9 text-grey">打开页面</text>
                    <x-picker v-model:show="showPage" v-model="form.page" :columns="[pages]"
                        confirm-color="var(--xl-primary)" @confirm="pageConfirm">
                        <text class="h9 font-weight-600" v-if="form.page"> {{ form.page_label }} </text>
                        <text class="h9 font-weight-600 text-placeholder" v-else> 请选择页面</text>
                    </x-picker>
                </view>
                <view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg" @tap="showQrcodeType = true;">
                    <text class="flex-1 h9 text-grey">二维码类型</text>
                    <x-picker v-model:show="showQrcodeType" v-model="form.qrcode_type" :columns="[qrcode_type]"
                        confirm-color="var(--xl-primary)" @confirm="qrcodeTypeConfirm">
                        <text class="h9 font-weight-600" v-if="form.qrcode_type"> {{ form.qrcode_type_label }} </text>
                        <text class="h9 font-weight-600 text-placeholder" v-else> 请选择二维码类型</text>
                    </x-picker>
                </view>
            </view>

            <view class="flex">
                <button class="flex-1 btn-primary btn-round" @click="submit()">提交</button>
            </view>
            <text class="h9 text-placeholder">{{ config.channels_apply_tips }}</text>
        </view>

        <!-- 选择意向城市 -->
        <x-loading v-if="loading" />
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue';
import { login, $api, $message, $auth, $page } from '@/utils';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
import { $Platform } from '@/utils/const/env';
const WebConfigStore = useWebConfigStore();
const pages = [
    {
        value: 'pages/index/index',
        label: '首页'
    },
    {
        value: 'pages/technician/index',
        label: WebConfigStore.replaceIndustryPersonnelName('技师列表')
    },
    {
        value: 'pages/login/login',
        label: '登录'
    }
];
const qrcode_type = [
    {
        value: $Platform.H5,
        label: 'H5二维码'
    },
    {
        value: $Platform.MP_WEIXIN,
        label: '小程序码'
    }
];
const form = ref({
    channels_id: '',
    channels: '',
    page: pages[0].value,
    page_label: pages[0].label,
    qrcode_type: qrcode_type[0].value,
    qrcode_type_label: qrcode_type[0].label,
});
const qrcode = ref('');
const config = ref({
    channels_apply_tips: '',
});
const channels = ref([]);
const loading = ref(false);
const showChannels = ref(false);
const showPage = ref(false);
const showQrcodeType = ref(false);
const showValidTime = ref(false);
const submit = () => {
    if (loading.value) return;
    loading.value = true;
    $api.Channels.createQrcode(form.value).then((res: any) => {
        qrcode.value = res.data.qrcode;
    }).catch((err: any) => {
        $message.error(err.msg);
    }).finally(() => {
        loading.value = false;
    })
}
const channelsConfirm = (e: any) => {
    form.value.channels = e.title;
    showChannels.value = false;
}
const pageConfirm = (e: any) => {
    form.value.page_label = e.label;
    showPage.value = false;
}
const qrcodeTypeConfirm = (e: any) => {
    form.value.qrcode_type_label = e.label;
    showQrcodeType.value = false;
}
const getConfig = () => {
    $api.Config.channels().then((res: any) => {
        config.value = res;
    }).catch(() => {
    })
}
const getChannels = () => {
    loading.value = true;
    $api.Channels.user().then((data: any) => {
        channels.value = data;
        if (channels.value.length > 0) {
            form.value.channels_id = data[0].id;
            form.value.channels = data[0].title;
        }
    }).catch(() => {
    }).finally(() => {
        loading.value = false;
    })
}
onLoad((options: any) => {
    getConfig();
    getChannels();
})
</script>
